<template>
	<view class="bigbox" :style="{height:hideHeight?'100vh':'auto',overflow:hideHeight?'hidden':'auto'}">
		<view class="box1" style="margin-top: 40rpx;">
			<view class="box1left">
				<view class="box1lefttop">
					<image src="@/static/image/gengduo@3x.png" mode=""></image>
					<view class="more" @click="mine">我的</view>
				</view>
				<view class="flex-row" :style="{opacity:JSON.stringify(userInfo)=='{}'?0:1}">
					<!-- v-if="JSON.stringify(userInfo)!='{}'" -->
					<!-- <view class="touxiang" style="width: 80rpx;height: 80rpx;overflow: hidden;border-radius: 50%;"> -->
					<!-- <image class="touxian" :src="userInfo.avatar || '/static/image/mine/avatar.jpg'" mode="widthFix" 
						style="width: 80rpx;border-radius: 50%;">
						</image> -->
					<!-- </view> -->
					<view class="right flex">
						<image :src="userInfo.avatar || '../../static/image/mine/avatar.jpg'"
							style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					</view>

					<view class="desc box1leftbottom flex-col">
						<text
							style="font-size: 16px;color: #333;font-weight: 500;width: 400rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{userInfo.nick_name}}</text>
						<text>宗道门——易学文化传播领航者</text>
					</view>
				</view>
			</view>
			<view class="box1right">
				<image src="@/static/image/home/fengshui@3x.png" mode=""></image>
			</view>
		</view>
		<view class="box2">
			<view class="p1">宗道门是中国风水策划业顶尖和最权威的学术中心，<text v-if='isWebPlatform'
					style="color: white;width: 140rpx;height: 50rpx; float: right;background-color:#4a7741 ;border-radius: 20rpx;display: flex;justify-content: center;align-items: center;margin-top: -20rpx;margin-right: -20rpx; font-size: 15px;"
					@click="download">App下载</text></view>
			<view class="p2">拥有专业上海算命大师、周易风水、旺财风水、看风水大师团队。</view>
		</view>
		<view class="box3">
			<view class="box3left">
				<view class="box3lefttop"
					style="background: url('../../static/image/home/bazi@3x.png') no-repeat center / 100%;"
					@tap="toPath('/pages/sum/sum')">
					<!-- <image src="../../static/image/home/bazi@3x.png" mode="">
					</image> -->
				</view>
				<view class="box3leftbottom"
					style="background: url('../../static/image/home/hehun@3x.png') no-repeat center / 100%;"
					@tap="toPath('/pages/marriage/marriage')">
					<!-- <image src="../../static/image/home/hehun@3x.png" mode="">
					</image> -->
				</view>
			</view>
			<view class="box3right">
				<view class="rili" @click='gotolao'>
					<view class="p1">今日/{{today}}</view>
					<view class="p2">{{yeargan}}{{yearzhi}}年 {{monthgan}}{{monthzhi}}月 {{daygan}}{{dayzhi}}日</view>
					<view class="p3">{{yangli}}</view>
					<view class="p4">
						<view class="span">万年历</view>
					</view>
				</view>
				<view class="number">{{total||0}}</view>
				<view class="cesuan">人在这里测算</view>
			</view>
		</view>
		<view class="box4">
			<view class="title">
				<text>热门测试</text>
			</view>
			<view class="box4content">
				<view class="box4left"
					style="background: url('../../static/image/home/yaogua@3x.png') no-repeat center / 100%;"
					@click="yaogua">
					<!-- <text>摇卦占卜</text> -->
					<!-- <image src="../../static/image/home/yaogua@3x.png" mode="" @click="yaogua"></image> -->
				</view>
				<view class="box4right"
					style="background: url('../../static/image/home/taluopai@3x.png') no-repeat center / 100%;"
					@click="taluopai">
					<!-- <text>塔罗牌占卜</text> -->
					<!-- <image src="../../static/image/home/taluopai@3x.png" mode="" @click="taluopai"></image> -->
				</view>
			</view>
		</view>
		<!-- 菜单1   -->
		<view class="box5">
			<view class="smallbox1" v-for="(item, idx) in menus" :key="idx">
				<image :src="item.imgsrc" mode="widthFix" @click="navTo(item.path, $event)"></image>
				<view class="p1">
					{{ item.text }}
				</view>
			</view>
		</view>
		<!--  菜单2  -->
		<view class="box6">
			<view v-for="(item, idx) in menus2" :key="idx" class="titlelist" @click="navTo(item.path, $event)">
				<text class="span">
					{{ item.text }}
				</text>
			</view>
		</view>
		<!--tab标签页切换-->
		<view class="box7">
			<u-tabs :list="tabList" :activeStyle="activeStyle" :current="current" @change="tabChange"></u-tabs>
		</view>
		<!--  文章评论    -->
		<block v-if="current == 0">
			<view v-for="(item,idx) in qualityComments" :key="idx" style="margin-bottom: 40rpx;">
				<view class="comment-item">
					<!-- friends_status -->
					<text :class="`subscribe-btn unfollow ${item.friends_status == '已关注'?'follow':''}`"
						@click="follow(item,$event)">{{item.friends_status == '已关注'?'已关注':'关注'}}</text>
					<view class="flex-row">
						<image class="author shrink-0" :src="item.mavatar?item.mavatar:'/static/image/touxiang.png'"
							@click="toUser(item.member_id,$event)">
						</image>
						<view class="flex-1">
							<view class="userphone"
								style="width: 400rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
								v-if="storyComments.length!=0">
								{{storyComments.find(item1=>item1.id==item.id).phone}}
							</view>
							<view class="usercomment" style='font-size: 12px;color:gray;'>发表评论:
								<text style="color:black;">{{item.content}}</text>
							</view>
							<navigator :url="`/pages/story/storydetails?id=${item.gushi_id}`" hover-class='none'>
								<view class="post">
									<view class="" style="font-size: 12px;">{{item.gtitle}}</view>
								</view>
							</navigator>
							<view class="commenttime" style="border-bottom: 1px solid #E9F3EA;">{{item.updatetime}}
							</view>

						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="current == 1">
			<!-- <view v-for="(item,idx) in posts" :key="idx" style="margin-bottom: 40rpx;">
				<view class="comment-item">
					<view class="flex-row">
						<image class="author shrink-0" :src="item.mavatar?item.mavatar:'/static/image/touxiang.png'"
							@click="toUser(item.member_id,$event)"></image>
						<view class="flex-1">
							<view class="post" @click="postDetail(item,$event)">
								<view class="u-line-2">{{item.content}}</view>
							</view>
							<view class="commenttime" style="border-bottom: 1px solid #E9F3EA;">{{item.createtime}}
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="hot_forum sort" style="">
				<!-- <view class="title">热门论坛</view> -->
				<scroll-view class="content">
					<view class="list" scroll-y style="">
						<view class="item" v-for="(item,index) in ListData" :key='index'>
							<view class="header flex">
								<image class="avatar" :src="item.member_info.avatar"
									@click="toUser(item.member_id,$event)"></image>
								<view class="username"
									style="max-width: 310rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
									{{item.member_info.name}}
								</view>
								<view class="time">{{item.createtime }}</view>

								<view @click='guanzhuList(item.member_id,item.friends_status)'
									class="focus flex_center">
									{{item.friends_status}}
								</view>

							</view>
							<view class="inner">
								<view class="detail el4" style='font-weight: 700;' @click="topicDetail(item.id,$event)">
									{{item.title}}
								</view>
								<view class="detail el4" @click="topicDetail(item.id,$event)">
									{{item.content}}
								</view>
								<view class="opt flex_between">
									<view class="flex">
										<view class="flex">
											<image v-if="item.zan_num === 0" src="../../static/image/forum/dianzan.png">
											</image>
											<image v-else src="../../static/image/forum/dianzan1.png"></image>
											<text class="num">{{item.zan_num}}</text>
										</view>
										<view class="flex" @click="topicDetail(item.id,$event)">
											<image src="../../static/image/forum/pinglun.png"></image>
											<text class="num">{{item.comment_num }}</text>
										</view>
										<view class="flex" @click="share(item)">
											<image src="../../static/image/forum/fenxiang.png" @click="refresh"></image>
											<text class="num">{{item.share_num }}</text>
										</view>
									</view>
									<view class="more" @click="topicDetail(item.id,$event)">
										<image src="../../static/image/forum/gengduo.png"></image>
									</view>
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
			</view>
		</block>
		<update-view @maskShow="maskShow" ref="updateView"></update-view>
	</view>
</template>

<script>
	import {
		totalUser,
		user_info,
		excellentComments,
		postShare,
		storyPinglunListAPI,
		zanshare,
		guanzhu_list,
		get_gushis_list,
		getSetting
	} from '@/api/api.js'
	import updateView from "@/components/updateView/index.vue";
	export default {
		components: {
			updateView
		},
		data() {
			return {
				ListData: [],
				value1: 1,
				filteredTopics: [],
				huati_id: null,
				currentPage: 1, // 当前页数
				pageSize: 5,
				setting: '',
				// 菜单1
				menus: [{
						text: '每日一占',
						imgsrc: '../../static/image/home/1@3x.png',
						path: '../../pages/day/day'
					},
					{
						text: '紫薇排盘',
						imgsrc: '../../static/image/home/2@3x.png',
						path: '../../pages/ziweipaipan/ziweipaipan'
					},
					{
						text: '每日运势',
						imgsrc: '../../static/image/home/3@3x.png',
						path: '../../pages/yunshi/yunshi'
					},
					{
						text: '查童子命',
						imgsrc: '../../static/image/home/4@3x.png',
						path: '../../pages/tongziming/tongziming'
					},
					{
						text: '周公解梦',
						imgsrc: '../../static/image/home/5@3x.png',
						path: '../../pages/zhougong/zhougong'
					},
					{
						text: '称骨论命',
						imgsrc: '../../static/image/home/6@3x.png',
						path: '../../pages/bone/bone'
					},
					{
						text: '择日查好',
						imgsrc: '../../static/image/home/7@3x.png',
						path: '../../pages/zeri/zeri'
					},
					{
						text: '电话吉凶',
						imgsrc: '../../static/image/home/8@3x.png',
						path: '../../pages/phone/phone'
					}
				],
				// 菜单2
				menus2: [{
						text: '在线起名',
						imgsrc: '',
						path: '/pages/makename/makename'
					},
					{
						text: '身份证吉凶',
						imgsrc: '',
						path: '/pages/idcard/idcard'
					},
					{
						text: '车牌号吉凶',
						imgsrc: '',
						path: '/pages/carnumber/carnumber'
					},
					{
						text: '阴阳历互转',
						imgsrc: '',
						path: '/pages/lunartransfer/lunartransfer'
					},
					{
						text: '公司名打分',
						imgsrc: '',
						path: '/pages/companyname/companyname'
					},
					{
						text: '数字测凶吉',
						imgsrc: '',
						path: '/pages/shuzijixiong/shuzijixiong'
					},
					{
						text: '小六壬占卜',
						imgsrc: '',
						path: '/pages/liurenzhanbu/liurenzhanbu'
					},
					{
						text: 'QQ号测吉凶',
						imgsrc: '',
						path: '/pages/qqxiongji/qqxiongji'
					},
					{
						text: '姓名打分',
						imgsrc: '',
						path: '/pages/nameanalysis/nameanalysis'
					},
					// {
					//     text: '八字反查',
					//     imgsrc: '',
					//     path: '/pages/bazifancha/bazifancha'
					// },
					// {
					// 	text: '百家姓查询',
					// 	imgsrc: '',
					// 	path: '/pages/baijiaxing/baijiaxing'
					// }
				],
				tabList: [{
						name: '优质评论'
					},
					{
						name: '网友分享'
					}
				],

				activeStyle: {
					height: '44rpx',
					fontSize: '32rpx',
					fontFamily: 'PingFangSC',
					fontWeight: '550',
					color: '#333333',
					lineHeight: '44rpx'
				},
				userInfo: {},
				current: 0,
				qualityComments: [],
				storyComments: [],
				posts: [],
				total: 0,
				hideHeight: false,
				title_laohuangli: '',
				today: '',
				yeargan: '',
				yearzhi: '',
				monthgan: '',
				monthzhi: '',
				daygan: '',
				dayzhi: '',
				yangli: ''
			}
		},
		/* async onShow() {
			let that = this
			// if (that.userInfo) return
			user_info().then(res => {
				that.userinfo = res.data.data
				uni.setStorageSync('userinfo', that.userinfo)
			})
			totalUser().then(res=>{
				that.total = res.data.data
			})
			// 先拿故事列表防止出错
			await that.getStoryComments()
			await that.getQualityComments()
			
		}, */
		computed: {
			// 判断当前运行的平台是否为Web
			isWebPlatform() {
				return process.env.UNI_PLATFORM === 'h5';
			},
		},
		onShow() {
			this.getStoryComments()
			this.getQualityComments()
			if (uni.getStorageSync("token")) {
				this.getUserInfo()
			}
			this.getGushisList()
			let that = this
			totalUser().then(res => {
				that.total = res.data.data
			})
		},
		onLoad() {
			this.getGushisList();
			//this.getSetting()
			this.gettoday().then(() => {
				const params = {
					title_laohuangli: this.title_laohuangli
				};
				uni.request({
					url: 'https://cs.appzdm.com:3000/Gongju/laohuangli',
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: params,
					success: (res) => {
						console.log(res, '###########');
						this.today = res.data.data.yinli
						this.yeargan = res.data.data.ganzhi.yeargan
						this.yearzhi = res.data.data.ganzhi.yearzhi
						this.monthgan = res.data.data.ganzhi.monthgan
						this.monthzhi = res.data.data.ganzhi.monthzhi
						this.daygan = res.data.data.ganzhi.daygan
						this.dayzhi = res.data.data.ganzhi.dayzhi
						this.yangli = res.data.data.yangli
					},
					fail: (error) => {
						console.error('Request Failed:', error);
					}
				});
			});
			this.$nextTick(() => {
				console.log(this.$refs.updateView, "!!!!!!!!!!!!!")
				this.$refs.updateView.openMask()
			})
		},
		methods: {
			toPath(url) {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url
				})
			},
			gotolao() {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/laohuangli/laohuangli?yangli=' + encodeURIComponent(this.yangli)
				})
			},

			toLogin() {
				console.log("<<<<<判断是否登录")
				if (uni.getStorageSync("token")) {
					return false
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return true
				}
			},
			
			/* 获取配置 当天日期 */
			async gettoday() {
				const res = await getSetting();
				this.title_laohuangli = res.data.data.today_date;
				console.log(this.title_laohuangli, '今天的日期是');
			},
			//故事详情9
			topicDetail(id, e) {
				uni.navigateTo({
					url: `/pages/story/storydetails?id=${id}`
				})
			},
			maskShow(value) {
				this.hideHeight = value
			},
			// 标签页切换时触发
			tabChange({
				index
			}) {
				this.current = index
				if (!index) {
					this.getQualityComments()
					return
				}
				this.getPosts()
			},
			/* 获取用户信息 */
			getUserInfo() {
				console.log('11111111111')
				let that = this
				user_info().then(res => {
					that.userInfo = res.data.data
					uni.setStorageSync('userinfo', that.userInfo)
					console.log(that.userInfo, '用户信息')
				})
			},
			//获取灵异故事评论列表
			getStoryComments() {
				const that = this
				return new Promise((resolve, reject) => {
					storyPinglunListAPI({
						type: 1
					}).then(res => {
						that.storyComments = res.data.data.rows
						resolve()
					}).catch(e => {
						reject()
					})
				})
			},
			// 获取优质评论
			getQualityComments() {
				const that = this
				return new Promise((resolve, reject) => {
					excellentComments({
						type: 1
					}).then(res => {
						console.log(res);
						that.qualityComments = res.data.data
						resolve()
					}).catch(e => {
						reject()
					})
				})
			},
			// 获取测文分享
			getPosts() {
				const that = this
				postShare().then(res => {
					console.log(res);
					that.posts = res.data.data
				})
			},
			postDetail(item) {
				uni.$u.route({
					url: '/pages/cewendetail/cewendetail',
					params: {
						content: item.content
					}
				})
			},
			toUser(id, e) {
				uni.navigateTo({
					url: `/pages/userInfo/userInfo?id=${id}`
				})
			},
			//点赞/收藏/分享
			handleCommentClick(comments) {
				const that = this
				zanshare({
					gushi_id: comments.gushi_id,
					type: '1',
					kind: '0',
				}).then(res => {
					console.log(res, '点赞了');

				}).catch(e => {
					//已经点赞过了
				})
			},
			//关注作者
			follow(commentItem) {
				const that = this
				guanzhu_list({
					to_member_id: commentItem.member_id,
					type: commentItem.friends_status == '已关注' ? '1' : '0',
				}).then(res => {
					// console.log(res);
					// 更改相应按钮的颜色
					// 找出当前关注id与列表中id匹配的项 手动置为对应的关注状态
					const item = that.qualityComments.find(item => item.member_id == commentItem.member_id)
					item.friends_status = commentItem.friends_status == '已关注' ? '关注' : '已关注'
				})
			},
			/* 关注 */
			async guanzhuList(id, type) {
				const params = {
					to_member_id: id,
					type: 0
				};
				try {
					type === '未关注' ? params.type = 0 : params.type = 1;
					const response = await guanzhu_list(params);
					this.getGushisList()
					uni.showToast({
						title: response.data.msg,
						icon: 'success',
						duration: 2000
					});
				} catch (error) {
					uni.showToast({
						title: error,
						icon: 'none',
						duration: 2000
					});
				}
			},
			async getGushisList() {
				const params = {
					clsss: 1,
					huati_id: this.huati_id, // 将 huati_id 作为参数传递
					page: this.currentPage, // 传递当前页数
					pageSize: this.pageSize
				};

				try {
					const response = await get_gushis_list(params);
					console.log('信息', response.data.data.rows);
					this.ListData = response.data.data.rows;
					//const newData = response.data.data.rows;
					if (newData && newData.length > 0) {
						this.ListData = this.ListData.concat(newData);
						this.currentPage++; // 增加当前页数
					} else {
						// 没有新数据，可能已经加载完全部数据，你可以根据实际情况处理
						console.log('No More Data');
					}
				} catch (error) {
					uni.showToast({
						title: error,
						icon: 'none',
						duration: 2000,
					});
				}
			},

			/* 分享 */
			async share(item) {
				const params = {
					gushi_id: item.id,
					type: 3,
					kind: 0
				};
				try {
					const response = await zanshare(params);
					// 获取当前页面路径
					const pages = getCurrentPages();
					const currentPage = pages[pages.length - 1];
					const currentPath = `/${currentPage.route}`;
					// 构建详情页路径
					const detailPath = `/pages/story/storydetails?id=${item.id}`;
					// 复制到剪贴板
					uni.setClipboardData({
						data: currentPath + detailPath,
						success: () => {
							// 复制成功后进行无痕刷新

							uni.showToast({
								title: '复制链接成功',
								icon: 'success',
								// duration: 2000
							});

						}
					});
					console.log('分享');
				} catch (error) {
					uni.showToast({
						title: error,
						icon: 'none',
						duration: 2000
					});
				}
			},

			refresh() {
				this.getGushisList();
			},
			change1(e) {
				console.log(e);
				uni.switchTab({
					url: this.tabList[e].url
				})
			},
			taluopai(e) {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/taluopai/taluopai'
				})
			},
			yaogua(e) {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/yaogua/yaogua'
				})
			},
			// 路由跳转
			navTo(url, e) {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			makename() {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/makename/makename'
				})
			},
			idcard() {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/idcard/idcard'
				})
			},
			carnumber() {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/carnumber/carnumber'
				})
			},
			companyname() {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/companyname/companyname'
				})
			},
			liuren() {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/liurenzhanbu/liurenzhanbu'
				})
			},
			lunartrans() {
				if (this.toLogin()) {
					return
				}
				uni.navigateTo({
					url: '/pages/lunartransfer/lunartransfer'
				})
			},
			mine() {
				if (this.toLogin()) {
					return
				}
				console.log("我的页面")
				uni.navigateTo({
					url: '/pages/tabbar/mine',
					fail(e) {
						console.log(e);
					}
				})
			},
			download() {
				if (this.toLogin()) {
					return;
				}
				window.location.href = this.setting
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bigbox {
		width: 100%;
		padding-bottom: 40rpx;
		background: #fefefe;
		background-image: url('../../static/image/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		//overflow-x: hidden;
		overflow-y: auto;

		.box1 {
			//margin-top: 88rpx;
			width: 100%;
			height: 230rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			display: flex;
			justify-content: space-between;
			//background-color: antiquewhite;
			box-sizing: border-box;

			.box1left {
				.avatar {
					flex-shrink: 0;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					background-color: #fff;
				}

				.box1lefttop {
					height: 56rpx;
					margin: 32rpx 0;
					background-image: url('../../static/image/bt.png');
					background-repeat: no-repeat;
					// background-size: 184rpx 56rpx;
					background-size: 156rpx 56rpx;
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 20rpx;
						//margin-top: 16rpx;
					}

					.more {
						margin-left: 20rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						color: #ffffff;
					}

					.avatar {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.box1leftbottom {
					margin-left: 10rpx;
					font-size: 12px;
				}
			}

			.box1right {
				width: 158rpx;
				height: 210rpx;
				margin-top: 32rpx;

				image {
					width: 158rpx;
					height: 210rpx;
				}
			}
		}

		.box2 {
			width: 100%;
			height: 200rpx;
			padding-left: 6rpx;
			//padding-right: 6rpx;
			padding-top: 60rpx;
			background-image: url('../../static/image/banner.png');
			background-repeat: no-repeat;
			//background-color: aqua;
			background-size: 738rpx 190rpx;
			box-sizing: border-box;

			.p1 {
				width: 580rpx;
				margin-left: 78rpx;
				font-size: 20rpx;
				line-height: 36rpx;
				color: #ffffff;
			}

			.p2 {
				width: 580rpx;
				margin-left: 78rpx;
				font-size: 20rpx;
				line-height: 36rpx;
				color: #ffffff;
			}
		}

		.box3 {
			width: 100%;
			height: 476rpx;
			display: flex;
			justify-content: flex-start;
			padding-left: 8rpx;
			overflow: hidden;
			box-sizing: border-box;

			//background-color: #1B490A;
			.box3left {
				width: 380rpx;

				.box3lefttop {
					width: 380rpx;
					height: 238rpx;

					image {
						width: 380rpx;
						height: 238rpx;
					}
				}

				.box3leftbottom {
					width: 380rpx;
					height: 238rpx;
					margin-top: -10rpx;

					image {
						width: 380rpx;
						height: 238rpx;
					}
				}
			}

			.box3right {
				width: 380rpx;
				height: 460rpx;
				margin-left: -25rpx;
				padding-top: 50rpx;
				background-image: url('../../static/image/riqi.png');
				background-repeat: no-repeat;
				background-size: 380rpx 460rpx;

				.rili {
					width: 284rpx;
					height: 164rpx;
					margin: 0 auto;
					padding-left: 10rpx;
					padding-right: 10rpx;
					padding-top: 6rpx;
					background: rgba(216, 216, 216, 0.18);
					border-radius: 16rpx;
					border: 2rpx solid #47663e;
					box-sizing: border-box;

					.p1 {
						//width: 280rpx;						
						font-size: 20rpx;
						font-family:
							PingFangSC,
							PingFang SC;
						font-weight: 600;
						color: #333333;
						line-height: 36rpx;
					}

					.p2 {
						width: 280rpx;
						height: 33rpx;
						font-size: 20rpx;
						font-family:
							PingFangSC,
							PingFang SC;
						font-weight: 600;
						color: #333333;
						line-height: 36rpx;
					}

					.p3 {
						width: 280rpx;
						height: 33rpx;
						font-size: 32rpx;
						font-family: DINAlternate, DINAlternate;
						font-weight: bold;
						color: #333333;
						line-height: 36rpx;
					}

					.p4 {
						width: 84rpx;
						height: 40rpx;
						background: #47663e;
						border-radius: 18rpx;
						//margin-top: 23rpx;
						margin-right: 30rpx;
						float: right;

						.span {
							//width: 60rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-family:
								PingFangSC,
								PingFang SC;
							font-weight: 600;
							color: #ffffff;
							line-height: 1;
							margin-top: 9rpx;
							text-align: center;
						}
					}
				}

				.number {
					width: 146rpx;
					height: 36rpx;
					font-size: 76rpx;
					//font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					color: #333333;
					line-height: 36rpx;
					margin-top: 90rpx;
					padding-left: 50rpx;
					box-sizing: border-box;
				}

				.cesuan {
					//width: 120rpx;
					height: 36rpx;
					font-size: 20rpx;
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 36rpx;
					padding-left: 50rpx;
					margin-top: 26rpx;
					box-sizing: border-box;
				}
			}
		}

		.box4 {
			width: 100%;
			height: 270rpx;
			//background-color: #FEFEFE;
			margin-top: 40rpx;

			text {
				width: 128rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family:
					PingFangSC,
					PingFang SC;
				font-weight: 550;
				color: #333333;
				line-height: 44rpx;
				margin-left: 32rpx;
			}

			.box4content {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				//background-color: aliceblue;
				padding-left: 8rpx;
				//padding-right: 8rpx;
				box-sizing: border-box;

				.box4left {
					width: 388rpx;
					height: 188rpx;

					image {
						width: 388rpx;
						height: 188rpx;
					}
				}

				.box4right {
					width: 388rpx;
					height: 188rpx;
					margin-left: -40rpx;
					box-sizing: border-box;

					image {
						width: 388rpx;
						height: 188rpx;
					}
				}
			}
		}

		.box5 {
			width: 100%;
			height: 400rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			//background-color: antiquewhite;
			.smallbox1 {
				width: 100rpx;
				height: 150rpx;
				margin-left: 40rpx;
				margin-right: 40rpx;
				margin-bottom: 50rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.p1 {
					width: 100rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					text-align: center;
				}
			}
		}

		.box6 {
			background: #ffffff;
			box-shadow: 0rpx 10rpx 6rpx 0rpx rgba(39, 85, 21, 0.18);
			border-radius: 20rpx;
			margin: 0 32rpx;
			padding: 16rpx 0;
			padding-left: 16rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.titlelist {
				width: 122rpx;
				border-radius: 19px;
				border: 1px solid #333333;
				margin: 16rpx 0;
				margin-right: 12rpx;
				text-align: center;
				box-sizing: border-box;
				//background-color: skyblue;
				display: flex;
				align-items: center;
				justify-content: center;

				.span {
					// height: 26rpx;
					padding-top: 7rpx;
					padding-bottom: 7rpx;
					font-size: 9px;
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					//background-color: pink;
					color: #333333;
					// line-height: 26rpx;
				}
			}
		}

		.box7 {
			margin-top: 50rpx;

			::v-deep .u-tabs {
				.u-tabs__wrapper {
					.u-tabs__wrapper__scroll-view-wrapper {
						.u-tabs__wrapper__scroll-view {
							.uni-scroll-view {
								.uni-scroll-view {
									.uni-scroll-view-content {
										.u-tabs__wrapper__nav {
											.u-tabs__wrapper__nav__line {
												margin-left: 10rpx;
												width: 22rpx !important;
												height: 14rpx !important;
												transform: translate(50rpx);
												transition-duration: 300ms;
												background-image: url('../../static/image/jiantou.png') !important;
												background-color: transparent !important;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.pinglun {
			width: 686rpx;
			height: 370rpx;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 6rpx 0rpx rgba(39, 85, 21, 0.18);
			border-radius: 20rpx;
			margin: 0 auto;
			padding-left: 24rpx;
			padding-right: 24rpx;
			padding-top: 32rpx;
			margin-top: 10rpx;
			box-sizing: border-box;
			display: flex;

			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}

			.pinglunr {
				margin-left: 16rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.span {
						width: 168rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family:
							PingFangSC,
							PingFang SC;
						font-weight: 550;
						color: #333333;
						line-height: 34rpx;
					}

					.guanzhu {
						width: 88rpx;
						height: 36rpx;
						background: #47663e;
						border-radius: 18rpx;

						.p1 {
							width: 40rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-family:
								PingFangSC,
								PingFang SC;
							font-weight: 500;
							color: #ffffff;
							line-height: 28rpx;
							margin: 0 auto;
							margin-top: 5rpx;
						}
					}
				}

				.second {
					width: 560rpx;
					//height: 56rpx;
					font-size: 20rpx;
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					color: gray;
					line-height: 28rpx;
					margin-top: 16rpx;
					//background-color: antiquewhite;
				}

				.three {
					width: 560rpx;
					//height: 88rpx;
					background: #e9f3ea;
					border-radius: 12rpx;
					padding-top: 15rpx;
					padding-bottom: 15rpx;
					box-sizing: border-box;
					margin-top: 16rpx;

					.span {
						width: 518rpx;
						height: 56rpx;
						font-size: 20rpx;
						font-family:
							PingFangSC,
							PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
						margin: 0 auto;
					}
				}

				.four {
					margin-top: 16rpx;
					//width: 104rpx;
					height: 28rpx;
					font-size: 20rpx;
					font-family:
						PingFangSC,
						PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}

				.five {
					margin-top: 40rpx;
					display: flex;
					justify-content: flex-end;

					.huifu {
						display: flex;
						width: 120rpx;

						text {
							//width: 40rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-family:
								PingFangSC,
								PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;
						}

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 7rpx;
							border-radius: 0%;
						}
					}

					.zan {
						display: flex;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 7rpx;
							border-radius: 0%;
						}

						text {
							//width: 20rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-family:
								PingFangSC,
								PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;
						}
					}
				}
			}
		}
	}

	.comment-item {
		position: relative;
		margin: 0 32rpx;
		padding: 32rpx 24rpx;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 5px 4px 0 #2755152e;

		.subscribe-btn {
			display: inline-block;
			position: absolute;
			right: 24rpx;
			top: 30rpx;
			width: 88rpx;
			padding: 4rpx 12rpx;
			border-radius: 9px;
			overflow: hidden;
			text-align: center;
			line-height: 14px;
			font-size: 10px;
			font-weight: 500;
			color: #fff;
		}

		.unfollow {
			background-color: #47663e;
		}

		.follow {
			color: #333;
			background-color: #e5e5e5;
		}

		.author {
			width: 72rpx;
			height: 72rpx;
			margin-right: 8px;
			border-radius: 50%;
			overflow: hidden;
		}

		.userphone {
			color: #333;
			font-size: 12px;
		}

		.usercomment {
			color: #33333399;
			font-size: 10px;
		}

		.post {
			border-radius: 6px;
			padding: 16rpx;
			background-color: #E9F3EA;
			margin-bottom: 16rpx;
		}

		.commenttime {
			color: #333;
			font-size: 10px;
			line-height: 14px;
			padding-bottom: 14rpx;
			margin-bottom: 18rpx;
		}
	}

	.hot_forum {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-bottom: -40rpx;

		/* 	.title {
						padding: 0 32rpx 24rpx;
					}
		 */
		.content {
			width: 100%;
			//flex: 1;
			height: 100%;
			overflow: auto;
			background: url("../../static/image/forum/bg.png") no-repeat 100%;
			background-position: bottom right;
			background-color: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;

			.list {
				//height: calc(100vh - 440rpx);
				flex: 1;

				//overflow-y: auto;
				.item {
					width: 100%;
					border-bottom: 2rpx solid #f5f5f5;
					padding: 32rpx;
					box-sizing: border-box;

					.header {
						.avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						.username {
							margin: 0 16rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #333333;
							line-height: 44rpx;
						}

						.time {
							font-size: 20rpx;
							font-weight: 400;
							color: #9EA7B6;
							line-height: 28rpx;
						}

						.focus {
							width: 96rpx;
							height: 40rpx;
							border-radius: 40rpx;
							border: 2rpx solid #275515;
							font-size: 20rpx;
							color: #275515;
							line-height: 28rpx;
							margin: 0 0 0 auto;
						}
					}

					.inner {
						padding-left: 76rpx;
						margin-top: 16rpx;

						.detail {
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							line-height: 34rpx;
						}

						.img_list {
							margin-top: 16rpx;

							.img_item {
								width: 240rpx;
								height: 200rpx;
								border-radius: 24rpx;
								margin-left: 16rpx;

								&:nth-child(1) {
									margin-left: 0;
								}
							}
						}

						.opt {
							margin-top: 32rpx;

							uni-image {
								width: 28rpx;
								height: 28rpx;
							}

							.num {
								margin: 0 48rpx 0 8rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #7C8491;
								line-height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
</style>